<template>
  <div class="special_home_container">
    <div class="special_home_fixed_btn">
      <a-button style="margin-bottom:10px" class="change_btn" :class="{change_btn_active: currentActiveButton === 2}" size="large" ghost @click="currentActiveButton = 2">全景图</a-button>
      <a-button class="mb12 change_btn" :class="{change_btn_active: currentActiveButton === 1}" size="large" ghost @click="currentActiveButton = 1">应用中心</a-button>
    </div>

    <transition-group
      name="home"
      :duration="500"
      mode="out-in"
    >
      <div v-if="currentActiveButton === 1" :key="1" class="special_home">
        <div class="special_top">
          <div
            v-for="item in specialListGetSvg"
            :key="item.id"
            class="special_top_box"
            @click="gotoRouter(item)"
          >
            <img :src="'data:image/png;base64,' + item.bgUrl" alt="">
            <div class="top_title" v-html="item.title" />
          </div>
        </div>
        <div class="special_mid">
          <div v-for="(item, index) in midBox" :key="index" class="special_mid_box" @click="gotoProject(item.title)">
            <img :src="item.picUrl" alt="">
            <div class="mid_title">{{ item.title }}</div>
          </div>
        </div>
        <div class="special_bot">
          <div class="businessCenter-container ">
            <div class="businessCenter-tabs">
              <el-button
                v-show="activeTab === '1'"
                class="businessCenter-plsp"
                type="primary"
                size="small"
                @click="spClick"
              >
                批量审批
              </el-button>
              <el-tabs v-model="activeTab" @tab-click="tabClick">
                <el-tab-pane
                  v-for="(item, index) in bussinessTaps"
                  :key="index"
                  :name="index + ''"
                >
                  <span slot="label" class="tabBox"><i v-if="g=headerInfo[index].title==='待办数'&&headerInfo[index].value!==0" class="dot">{{ headerInfo[index].value>99?'99+':headerInfo[index].value }}</i>{{ item.title }}</span>
                </el-tab-pane>
              </el-tabs>
            </div>

            <div ref="tableContainer" class="businessCenter-table">
              <pageHomeTable ref="bus-table" :form="form" :class="form.formClass" />
            </div>
          </div>
        </div>

        <My-Dialog
          :visible.sync="dialogVisible"
          :data-list="dbChecked"
          @updateValue="tabClick"
        />
      </div>

      <div v-else :key="2" class="special_home cqc">
        <div class="special_home_sysjg">
          <img style="height: 100%;width:100%;" src="~@/assets/img/home/sys-jiagou.png">
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import { downFile } from '@/utils/getFiles';
import { getKeyByMenuId } from '@/api/propertyHomePage/index';
import {
  getApplyTaskList,
  getTodoTaskList,
  getApproveList,
  getDraft,
  getCount,
  getSidByDefKey
} from '@/api/table';
import pageHomeTable from '@/views/kqPageHome/components/pageHomeTable';
import SearchInput from '@/views/kqPageHome/components/SearchInput';
import VXETable from 'vxe-table';
import SearchInputSub from '@/views/kqPageHome/components/SearchInputSub';
import MyDialog from '@/views/kqPageHome/components/MyDialog';

const mapStatus = {
  running: {
    label: '运行中',
    color: '#2998FF'
  },
  end: {
    label: '结束',
    color: '#FAB01C'
  },
  back: {
    label: '驳回',
    color: '#898BE4'
  },
  NORMAL: {
    label: '运行中',
    color: '#2998FF'
  },
  BACK: {
    label: '驳回',
    color: '#898BE4'
  }
};

export default {
  name: 'SpecialHome',
  components: { pageHomeTable, MyDialog },
  data() {
    return {
      currentActiveButton: 2,
      dialogVisible: false,
      dbChecked: [],
      specialListGetSvg: [],
      loading: false,
      midBox: [
        {
          picUrl: require('@/assets/img/specialHome/文件管理.png'),
          title: '文件管理 '
        },
        {
          picUrl: require('@/assets/img/specialHome/项目管理.png'),
          title: '项目管理'
        },
        {
          picUrl: require('@/assets/img/specialHome/预算管理.png'),
          title: '项目执行 '
        },
        {
          picUrl: require('@/assets/img/specialHome/指标管理.png'),
          title: '监管中心'
        },
        {
          picUrl: require('@/assets/img/specialHome/采集构成.png'),
          title: '风险管理'
        },
        {
          picUrl: require('@/assets/img/specialHome/合同管理.png'),
          title: '资产管理'
        },
        {
          picUrl: require('@/assets/img/specialHome/计划管理.png'),
          title: '数据集成'
        },
        {
          picUrl: require('@/assets/img/specialHome/支付管理.png'),
          title: '数字政府'
        }
      ],
      headerInfo: [
        {
          title: '申请数',
          key: 'sq',
          value: 0
        },
        {
          title: '待办数',
          key: 'db',
          value: 0
        },
        {
          title: '已办数',
          key: 'yb',
          value: 0
        },
        {
          title: '暂存数',
          key: 'zc',
          value: 0
        }
      ],
      headerInfoAnimate: false,
      activeTab: '',
      bussinessTaps: [
        {
          title: '我的申请'
        },
        {
          title: '我的待办'
        },
        {
          title: '我的已办'
        },
        {
          title: '我的草稿'
        }
      ],
      UserInput: '',
      subjectInput: '',
      form: {
        formClass: '',
        colunms: [],
        data: [],
        height: 0,
        isLoading: false,
        request: {
          pageSize: 20,
          pageIndex: 1,
          searchSubject: '',
          total: 0
        },
        pageChange: data => {
          const { pageSize, currentPage } = data;
          if (pageSize !== this.form.request.pageSize) {
            this.form.request.pageSize = pageSize;
            this.form.request.pageIndex = 1;
          } else {
            this.form.request.pageIndex = currentPage;
          }
          this.sendRequest(this.requestData);
        }
      },
      btnItem: '',
      roleName: ''
    };
  },
  computed: {
    menuList() {
      let list = [];
      this.$store.state.permission.menuList.map(o => {
        if (o.title === '全景图') {
          list = o.children;
        }
      });
      return list.filter(item => item.name.includes('special'));
    },
    menuList1() {
      return this.$store.state.permission.menuList;
    },
    requestData() {
      const data = this.form.request;
      // 草稿
      if (this.activeTab === '3') {
        return {
          userId: this.userId,
          pageIndex: data.pageIndex,
          pageSize: data.pageSize
        };
      } else {
        return {
          order: 'asc',
          offset: (data.pageIndex - 1) * data.pageSize,
          limit: data.pageSize,
          'task.subject_^VLK': this.subjectInput || data.searchSubject,
          'assignee_names_^VLK': this.UserInput
        };
      }
    },

    userId() {
      return localStorage.getItem('xcUserId');
    },

    getData() {
      const map = {
        0: getApplyTaskList, // 申请
        1: getTodoTaskList, // 待办
        2: getApproveList, // 已办
        3: getDraft // 草稿
      };

      if (this.activeTab in map) {
        return map[this.activeTab];
      } else {
        return () => {
          throw new Error(
            '没有' + this.bussinessTaps[this.activeTab * 1].title + '的对应方法'
          );
        };
      }
    }
  },
  watch: {
    specialListGetSvg: {
      deep: true,
      handler: function(value) {
        value.length === this.menuList.length && (this.loading = false);
      }
    }
  },

  mounted() {
    this.activeTab =
      (this.$route.query.type && this.$route.query.type + '') || '1';
    this.form.height = this.$refs.tableContainer && this.$refs.tableContainer.offsetHeight - 30;
    this.tabClick();
    this.getCount();
  },
  async created() {
    // 获取所有图片再显示
    // this.loading = true;
    this.roleName = localStorage.getItem('xcNickName');
    const {
      searchChange, searchChangeSub
    } = this;
    await this.getSvgAll();

    VXETable.renderer.add('SearchInput', {
      isFooter: false,
      // 筛选模板
      renderFilter(h, renderOpts, params) {
        return [
          <SearchInput
            on-searchChange={val => searchChange(val)}
            params={this.UserInput}
          />
        ];
      }
    });
    VXETable.renderer.add('SearchInputSub', {
      isFooter: false,
      // 筛选模板
      renderFilter(h, renderOpts, params) {
        return [
          <SearchInputSub
            on-searchChangeSub={val => searchChangeSub(val)}
            params={this.subjectInput}
          />
        ];
      }
    });
  },
  methods: {
    gotoProject(val) {
      this.getItem(this.menuList1, val);
      if (this.btnItem && val === '数字政府') {
        this.goRoute(this.btnItem);
      }
    },
    getItem(arr, name) {
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i].title);
        if (arr[i].title === name) {
          this.btnItem = arr[i];
        }
        if (arr[i].children) {
          this.getItem(arr[i].children, name);
        }
      }
    },
    goRoute(item) {
      const params = {
        path: item.path,
        query: {
          parentName: item.parentTitle,
          title: item.title,
          menuId: item.id,
          flag: 0,
          sId: 'TabsTable',
          isHideLeft: item.isHideLeft,
          isHideTop: item.isHideTop
          // isShow: true
        }
      };
      if (item.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    },
    spClick() {
      const table = this.$refs['bus-table'].tableRef();
      this.dbChecked = table.getCheckboxRecords();
      if (this.dbChecked.length) {
        this.dialogVisible = true;
      } else {
        this.$message.warning('请至少选中一条数据');
      }
    },

    searchChange(val) {
      this.UserInput = val;
      this.sendRequest(this.requestData);
    },

    searchChangeSub(val) {
      this.subjectInput = val;
      this.sendRequest(this.requestData);
    },

    async getSvgAll() {
      const arrData = [];
      const arrItem = [];
      const nameArr = ['special_statute', 'special_risk', 'special_decision'];
      await this.menuList.forEach(async item => {
        //         if(item.title==='E码通管'||item.title==='资金监管'||item.title==='综合分析'){
        // console.log(item.title,item);
        //       }
        if (nameArr.includes(item.name)) {
          const data = {
            id: item.import,
            saveName: item.import
          };
          arrData.push(data);
          arrItem.push(item);
          // await downFile(data, 'pic').then(res => {
          //   res = res.split(',')[1];
          //   this.specialListGetSvg.push({
          //     ...item,
          //     bgUrl: res
          //   });
          //   // this.topPic.push({
          //   //   ...item,
          //   //   bgUrl: res
          //   // });
          //   // console.log('a',this.topPic);
          // });
        }
      });
      for (let i = 0; i < arrData.length; i++) {
        await downFile(arrData[i], 'pic').then(res => {
          res = res.split(',')[1];
          this.specialListGetSvg.push({
            ...arrItem[i],
            bgUrl: res
          });
        });
      }
    },

    gotoRouter(a) {
      if (this.roleName !== '杨青' && a.title === '资金监管') {
        this.$router.push('/largeScreen4');
        return '';
      }
      if (this.roleName !== '杨青' && a.title === '一屏智控') {
        this.$router.push('/largeScreen/kqOnePage');
        return '';
      }
      localStorage.setItem('specialPanorama', a.parentTitle);
      if (!a.meta) {
        a.meta = {};
        a.meta.title = a.name;
      }
      if (!a.redirect) {
        if (!a.type) {
          this.getKeyByMenuId(a);
        } else {
          this.yewuMenu(a);
        }
      } else {
        const obj = a.children.find(item => item.path === a.redirect);
        this.gotoRouter(obj);
      }
    },

    getKeyByMenuId(a) {
      getKeyByMenuId({
        menuId: a.id
      }).then(res => {
        if (res.success) {
          const params = {
            path: a.path,
            query: {
              type: 0,
              name: a.name,
              title: a.meta.title,
              sId: res.data.sId.split('-')[0],
              key: res.data.key,
              defId: res.data.id,
              bizKey: '',
              flag: 0,
              fileType: res.data.fileType,
              menuId: a.id,
              formGuid: '',
              taskId: '',
              isHideLeft: a.isHideLeft,
              isHideTop: a.isHideTop,
              parentTitle: a.parentTitle
              // isShow: true
            }
          };
          if (a.isTargetNew + '' === '0') {
            this.$router.push(params);
          } else {
            const routeUrl = this.$router.resolve(params);
            const tempwindow = window.open('_blank'); // 先打开页面
            tempwindow.location = routeUrl.href; // 后更改页面地址
          }
        } else {
          this.$message({
            message: '该菜单存在问题，请联系运维人员',
            type: 'warning'
          });
        }
      });
    },

    yewuMenu(a) {
      const params = {
        path: a.path,
        query: {
          title: a.meta.title,
          menuId: a.id,
          flag: 0,
          // isShow: isShow,
          sId: 'TabsTable',
          isHideLeft: a.isHideLeft,
          isHideTop: a.isHideTop,
          parentTitle: a.parentTitle,
          type: 0
        }
      };
      // 不打开新页面
      if (a.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    },

    getCount() {
      return getCount({ userId: this.userId }).then(res => {
        setTimeout(() => {
          this.headerInfoAnimate = true;
        }, 500);

        if (res.success) {
          const data = res.data;
          data.forEach((item, index) => {
            this.headerInfo[index].value = item.total;
          });
        }
      });
    },

    tabClick() {
      this.form.formClass = 'animated fadeIn';
      setTimeout(() => {
        this.form.formClass = '';
      }, 500);
      this.form.request.pageIndex = 1;

      this.sendRequest(this.requestData);
      this.form.colunms = this.getTableColunms();
      this.getCount();
    },

    sendRequest(data) {
      this.form.isLoading = true;
      return this.getData(data).then(res => {
        this.form.isLoading = false;
        if (res.success) {
          this.form.data = res.data;
          this.form.request.total = res.total;
          return Promise.resolve(res);
        } else {
          this.form.data = [];
          this.form.request.total = 0;
        }
      });
    },

    commonDo(row, flag) {
      let key = '';
      if (flag === 0) {
        key = row.key;
      } else {
        key = row.defKey;
      }
      getSidByDefKey({
        key: key
      }).then(res => {
        if (res.success) {
          if (flag === 0) {
            const param = {
              path: res.data.path,
              query: {
                subject: row.topic,
                title: row.topic.split('发起')[1],
                sId: row.sId,
                formGuid: row.formGuid,
                key: row.key,
                defId: row.id,
                flag: flag,
                fileType: row.fileType,
                isHideLeft: 0,
                isHideTop: 1
                // isShow: true
              }
            };
            const routeUrl = this.$router.resolve(param);
            const tempwindow = window.open('_blank'); // 先打开页面
            tempwindow.location = routeUrl.href; // 后更改页面地址
          } else {
            const param = {
              path: res.data.path,
              query: {
                subject: row.subject,
                title: row.subject.split('发起')[1],
                sId: res.data.sId,
                formGuid: row.bizKey,
                defId: row.defId,
                instId: row.instId,
                taskId: row.taskId,
                nodeId: row.nodeId,
                flag: flag,
                fileType: res.data.fileType,
                signName: row.status,
                isHideLeft: 0,
                isHideTop: 1
              }
            };
            const routeUrl = this.$router.resolve(param);
            const tempwindow = window.open('_blank'); // 先打开页面
            tempwindow.location = routeUrl.href; // 后更改页面地址
          }
        } else {
          this.$message({
            type: 'warning',
            message: '该事项的流程有问题'
          });
        }
      });
    },

    // table 操作
    operatorClick(row, type) {
      const eventMap = {
        0: row => {
          // 我的申请
          this.commonDo(row, 1);
        },
        1: row => {
          // 我的待办
          this.commonDo(row, 2);
        },
        2: row => {
          // 我的已办
          this.commonDo(row, 1);
        },
        3: row => {
          // 我的草稿
          this.commonDo(row, 0);
        }
      };

      if (type in eventMap) {
        eventMap[type](row);
      }
    },
    // 表头
    getTableColunms() {
      const map = {
        0: [
          { type: 'seq', width: 60, title: '序号' },
          {
            title: '环节状态',
            width: 100,
            slots: {
              default: ({ row }) => {
                const map = mapStatus;
                const item = map[row.status];
                return [
                  <div>
                    {item
                      ? [
                        <span
                          style={{
                            color: item.color
                          }}
                        >
                          {item.label}
                        </span>
                      ]
                      : [<span>未定义：{row.status}的状态</span>]}
                  </div>
                ];
              }
            }
          },
          {
            field: 'assigneeNames',
            title: '当前审核人',
            filters: [{ data: '' }],
            filterRender: {
              name: 'SearchInput'
              // attrs: { placeholder: "按回车确认筛选", class: "hhh" },
              // events: { keyup: this.assigneeNamesFilter }
            }

            // filterMethod: ({ option, row }) => {
            //   if (row.assigneeNames === undefined) {
            //     if (option.data === "") {
            //       return true;
            //     } else {
            //       return false;
            //     }
            //   } else {
            //     if (row.assigneeNames.includes(option.data)) {
            //       return true;
            //     } else {
            //       return false;
            //     }
            //   }
            // },
          },
          {
            field: 'subject',
            title: '主题',
            minWidth: 300,
            filters: [{ data: '' }],
            filterRender: {
              name: 'SearchInputSub'
              // attrs: { placeholder: "按回车确认筛选", class: "hhh" },
              // events: { keyup: this.assigneeNamesFilter }
            }
            // filterMethod: ({ option, row }) => {
            //   if (row.subject === undefined) {
            //     if (option.data === "") {
            //       return true;
            //     } else {
            //       return false;
            //     }
            //   } else {
            //     if (row.subject.includes(option.data)) {
            //       return true;
            //     } else {
            //       return false;
            //     }
            //   }
            // }
          },
          { field: 'creator', title: '创建人', width: 100 },
          {
            title: '创建时间',
            slots: {
              default: ({ row }) => {
                return [<div>{row.createTime.split(' ')[0]}</div>];
              }
            }
          },
          {
            title: '结束时间',
            slots: {
              default: ({ row }) => {
                return [<div>{row.endTime && row.endTime.split(' ')[0]}</div>];
              }
            }
          },
          {
            title: '操作',
            width: 100,
            slots: {
              default: ({ row }) => {
                const { operatorClick, activeTab } = this;
                return [
                  <div class='table-operator'>
                    <span onclick={() => operatorClick(row, activeTab)}>
                      查看
                    </span>
                    <span>撤回</span>
                  </div>
                ];
              }
            }
          }
        ],
        1: [
          { type: 'checkbox', width: 50 },
          { type: 'seq', width: 60, title: '序号' },
          {
            title: '环节状态',
            width: 100,
            slots: {
              default: ({ row }) => {
                const map = mapStatus;
                const item = map[row.status];
                return [
                  <div>
                    {item
                      ? [
                        <span
                          style={{
                            color: item.color
                          }}
                        >
                          {item.label}
                        </span>
                      ]
                      : [<span>未定义：{row.status}的状态</span>]}
                  </div>
                ];
              }
            }
          },
          {
            field: 'assigneeNames',
            title: '当前审核人',
            filters: [{ data: '' }],
            filterRender: {
              name: 'SearchInput'
            }

          },
          {
            field: 'subject',
            title: '主题',
            minWidth: 300,
            filters: [{ data: '' }],
            filterRender: {
              name: 'SearchInputSub'
            }

          },
          { field: 'creator', title: '创建人', width: 100 },
          {
            title: '创建时间',
            slots: {
              default: ({ row }) => {
                return [<div>{row.createTime.split(' ')[0]}</div>];
              }
            }
          },
          {
            title: '结束时间',
            slots: {
              default: ({ row }) => {
                return [<div>{row.endTime && row.endTime.split(' ')[0]}</div>];
              }
            }
          },
          {
            title: '操作',
            width: 100,
            slots: {
              default: ({ row }) => {
                const { operatorClick, activeTab } = this;
                return [
                  <div class='table-operator'>
                    <span onclick={() => operatorClick(row, activeTab)}>
                      去办理
                    </span>
                  </div>
                ];
              }
            }
          }
        ],
        2: [
          { type: 'seq', width: 60, title: '序号' },
          {
            title: '环节状态',
            width: 100,
            slots: {
              default: ({ row }) => {
                const map = mapStatus;
                const item = map[row.status];
                return [
                  <div>
                    {item
                      ? [
                        <span
                          style={{
                            color: item.color
                          }}
                        >
                          {item.label}
                        </span>
                      ]
                      : [<span>未定义：{row.status}的状态</span>]}
                  </div>
                ];
              }
            }
          },
          {
            field: 'assigneeNames',
            title: '当前审核人',
            filters: [{ data: '' }],
            filterRender: {
              name: 'SearchInput'
            }

          },
          {
            field: 'subject',
            title: '主题',
            minWidth: 300,
            filters: [{ data: '' }],
            filterRender: {
              name: 'SearchInputSub'
            }
          },
          { field: 'creator', title: '创建人', width: 100 },
          {
            title: '创建时间',
            slots: {
              default: ({ row }) => {
                return [<div>{row.createTime.split(' ')[0]}</div>];
              }
            }
          },
          {
            title: '结束时间',
            slots: {
              default: ({ row }) => {
                return [<div>{row.endTime && row.endTime.split(' ')[0]}</div>];
              }
            }
          },
          {
            title: '操作',
            width: 100,
            slots: {
              default: ({ row }) => {
                const { operatorClick, activeTab } = this;
                return [
                  <div class='table-operator'>
                    <span onclick={() => operatorClick(row, activeTab)}>
                      查看
                    </span>
                  </div>
                ];
              }
            }
          }
        ],
        3: [
          { type: 'seq', width: 60, title: '序号' },
          { field: 'topic', title: '主题', minWidth: 300 },
          {
            title: '创建时间',
            slots: {
              default: ({ row }) => {
                return [<div>{row.createTime.split(' ')[0]}</div>];
              }
            }
          },
          {
            title: '操作',
            width: 100,
            slots: {
              default: ({ row }) => {
                const { operatorClick, activeTab } = this;
                return [
                  <div class='table-operator'>
                    <span onclick={() => operatorClick(row, activeTab)}>
                      继续编辑
                    </span>
                  </div>
                ];
              }
            }
          }
        ]
      };
      const tab = this.activeTab;
      if (tab in map) {
        return map[tab];
      } else {
        return [];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.special_home_container {
  padding: 0 150px;
  width: 100%;
  height: 100%;
  position: relative;
  // overflow: hidden;

  .special_home_fixed_btn {
    position: absolute;
    top: 20px;
    left: 16px;
    width: 8%;

    .change_btn {
      width: 86px;
      border-color: #fff;
      color: #fff;

      &.change_btn_active {
        background-color: #FAAD14 !important;
        border-color: #FAAD14;
      }
    }
  }
}

.special_home {
  width: 100%;
  // height: 56.25vw;
  // height: calc(100vh - 138px);
  height: 100%;
  padding-top: px2vw(18px);

  .special_home_sysjg {
    width: 100%;
    height: calc(100% - 60px);
    // height: 100%;
    overflow: auto;
    text-align: center;
    // background-color: red;
    // background-image: url('~@/assets/img/home/sys-jiagou.png');
    // background-size: 100% 100%;
  }

}

.special_top {
  height: 18%;
  display: flex;
  justify-content: space-between;
  .special_top_box {
    width: 30%;
    height: 100%;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 9px 28px 8px rgba(20, 146, 255, 0.05),
      0px 6px 16px 0px rgba(20, 146, 255, 0.08),
      0px 3px 6px -4px rgba(20, 146, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    img {
      width: px2vw(64px);
    }
    .top_title {
      font-size: px2vw(20px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      color: #333333;
    }
  }
}
.special_mid {
  height: 22%;
  padding: px2vw(34px) 0;
  display: flex;
  justify-content: space-between;
  .special_mid_box {
    width: 11%;
    height: 100%;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 9px 28px 8px rgba(20, 146, 255, 0.05),
      0px 6px 16px 0px rgba(20, 146, 255, 0.08),
      0px 3px 6px -4px rgba(20, 146, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: px2vw(32px);
    }
    .mid_title {
      margin-top: px2vw(5px);
      font-size: px2vw(16px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      color: #333333;
    }
  }
}
.special_bot {
  height: 50%;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 9px 28px 8px rgba(20, 146, 255, 0.05),
    0px 6px 16px 0px rgba(20, 146, 255, 0.08),
    0px 3px 6px -4px rgba(20, 146, 255, 0.12);
}
.businessCenter-container {
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  position: relative;

  .businessCenter-table {
    // flex: 1;
    height: calc(100% - 45px);
  }

  .businessCenter-plsp {
    z-index: 3;
    position: absolute;
    right: 12px;
  }
}

.table-operator {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  color: #1890ff;
  > span {
    cursor: pointer;
    text-decoration: underline;
  }
}
/deep/.vxe-table--filter-wrapper.filter--active {
  display: block;
}
.tabBox{
  position: relative;
  display: block;
}
.dot{
  position: absolute;
  background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
    font-style: normal;
    right: -17px;
    top: 0px;
}

.home-enter-active
{
  animation: fadeIn .5s ease;
}

.home-leave-active {
  animation: fadeOut .5s ease;
}
</style>
